<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人注册</title>
  <!-- 引入favicon图标 -->
  <link rel="shortcut icon" href="./favicon.ico" />
  <!-- 引入register.css -->
  <link rel="stylesheet" href="./CSS/register.css">
  <!-- 引入初始化base.css -->
  <link rel="stylesheet" href="./CSS/base.css">
</head>
<body>
  <div class="w">
    <div class="register-top">
      <div class="logo"><a href="./index.html"><img src="./images/logo.png" alt="" srcset=""></a></div>
    </div>
    <div class="register-main">
      <div class="main-hd">
        <h3>
          <span>注册新用户</span>
          <span>我有账号，去<a href="javascript:;">登录</a></span>
        </h3>
      </div>
          <div class="main-bd">
            <div class="content">
              <form action="">
                <ul>
                  <li>
                    <label for="tel">手机号：</label>
                    <input type="tel" name="tel" id="tel"><img src="./images/error.png" alt="" srcset="">
                    <span class="error">手机号码格式不正确，请从新输入</span>
                  </li>
                  <li>
                    <label for="massage">短信验证码：</label>
                    <input type="massage" name="massage" id="massage"><img src="./images/success.png" alt="" srcset="">
                    <span class="success">短信验证码格式正确</span>
                  </li>
                  <li>
                    <label for="password">登录密码：</label>
                    <input type="password" name="password" id="password"><i id="pwd_i"><img src="./images/close.png" id="pwd_img" alt="" srcset=""></i><img src="./images/error.png" alt="" srcset="">
                    <span class="error">手机号码格式不正确，请从新输入</span>
                  </li>
                  <li class="safe">
                    <span>安全程度<em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em></span>
                  </li>
                  <li>
                    <label for="again">确认密码：</label>
                    <input type="password" name="again" id="again"><i id="again_i"><img src="./images/close.png" id="again_img" alt="" srcset=""></i><img src="./images/error.png" alt="" srcset="">
                    <span class="error">手机号码格式不正确，请从新输入</span>
                  </li>
                  <li class="checkbox">
                    <input type="checkbox" name="redio" id="redio"><span>同意协议并注册<a href="javascript:;">《夜默默用户协议》</a></span>
                  </li>
                  <li class="sumbit"><input type="submit" value="完成注册" class="btn"></li>
                </ul>
              </form>
            </div>
          </div>
    </div>

    <div class="register-footer">
      <div class="footer-li">
        <ul>
          <li>关于我们</li>
          <li></li>
          <li>联系我们</li>
          <li></li>
          <li>联系客服</li>
          <li></li>
          <li>商家入驻</li>
          <li></li>
          <li>营销中心</li>
          <li></li>
          <li>手机品优购</li>
          <li></li>
          <li>友情链接</li>
          <li></li>
          <li>销售联盟</li>
          <li></li>
          <li>品优购社区</li>
          <li></li>
          <li>品优购公益</li>
          <li></li>
          <li>English Site</li>
          <li></li>
          <li>Contact U</li>
        </ul>
      </div>
      <div class="address">
        <p>
          地址：北京市昌平区建材城西路金燕龙办公
          楼一层 邮编：100096 电话：400-618-4
          000 传真：010-82935100 邮箱: zh
          anghj+itcast.cn
        </p>
        <p>
          京ICP备08001421号京公网安备110108007702
        </p>
      </div>
    </div>
  </div>

  <script>
    var password = document.getElementById("password");
    var pwd_i = document.getElementById("pwd_i");
    var pwd_img = document.getElementById("pwd_img");
    var again = document.getElementById("again");
    var again_i = document.getElementById("again_i");
    var again_img = document.getElementById("again_img");
    
    // 小眼睛
    blur(password , pwd_i);
    blur(again , again_i);

    // 小眼睛图片更改
    clock(password, pwd_i , pwd_img);
    clock(again , again_i , again_img);


    

    function blur(element, element_i){
      element.onblur = () => {
        if (element.value != "") {
          element_i.style.display = "block";
        }
        else {
          element_i.style.display = "none";
        }
      }
    }

    function clock(element, element_i , element_img){
       // 设置起始标志
      var flag = 1;   // 关闭
      element_i.onclick = () => { 
        if (flag == 0) {
          element_img.src = "./images/close.png";
          flag = 1;
          element.type = "password";
        }
        else {
          element_img.src = "./images/open.png";
          flag = 0;
          element.type = "text";
        }
      }
    }
  </script>
</body>
</html>